이벤트 전파 방식

✒️ 2025-05-23 15:18 내용 수정

이벤트가 발생했을 때 브라우저가 Event Listener를 실행시킬 대상 요소를 결정하는 과정

• 참고 자료 : TCHSchool js eventlistener call
• 단일 객체에서는 이벤트 전파가 발생하지 않지만, Document 객체나 HTML 문서 요소라면 대상 요소를 결정하기 위한 이벤트 전파가 일어난다.

1. 버블링(bubbling) 전파 방식

• 이벤트가 발생한 요소부터 시작해서 DOM 트리를 따라 위로 올라가며 전파되는 방식이다.
• 다수의 공통으로 적용되는 Event Listener를 각각의 요소마다 따로 등록할 필요 없이 공통된 조상 요소에 한 번만 등록하면 처리할 수 있다.

2. 캡처링(capturing) 전파 방식

• DOM 트리의 최상위부터 이벤트가 발생한 요소까지 아래로 내려가며 전파되는 방식
• addEventListener() 함수에 세 번째 인자로 true를 지정해야 사용할 수 있다.
• 실제 이벤트 대상이 되는 요소에 이벤트가 전달되기 전에 상위 요소에 등록된 Event Listener가 잡아낼 수 있다(capture).
  • 이벤트 취소 기법 : 특정 이벤트가 호출되지 않도록 하는 기법
  • 약간 다르긴 하지만 switch문, try-catch문에서 보던 구조와 비슷한 듯 하다.

이벤트 취소

• 이벤트 동작을 취소하려면 preventDefault(), returnValue property를 사용한다.
• 이벤트 전파를 취소하려면 stopPropagation(), cancelBubble property를 사용한다.